<template>
    <div>
        <el-upload :action="action" :headers="headers" :multiple="multiple" :with-credentials="false" :data="data"
            :show-file-list="true" :drag="false" accept=".jpg,.png" :on-preview="onPreview" :on-remove="onRemove"
            :on-success="onSuccess" :before-upload="beforeUpload" :on-exceed="onExceed" list-type="picture-card"
            :auto-upload="true" :disabled="disabled" :limit="limit" :file-list="fileList" :on-error="onError">
            <div slot="default">
                <i class="el-icon-plus"></i>
                <p></p>
            </div>
        </el-upload>
        <el-dialog :visible.sync="previewShow" title="预览图片" append-to-body>
            <img width="100%" :src="previewUrl" alt="" />
        </el-dialog>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    name: "el-upload-image",
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        multiple: {
            type: Boolean,
            default: true
        },
        limit: {
            type: Number,
            default: 1
        },
        value: {
            type: Array,
            default: () => []
        },
    },
    model: {
        prop: "value",
        event: "change"
    },
    watch: {
        value() {
            if (this.fileList.length !== this.value.length) {
                this.fileList = this.value;
                return;
            }
            if (this.fileList.length === this.value.length) {
                const result = this.fileList.some((item, index) => {
                    return item.url !== this.value[index].url;
                });
                if (result) {
                    this.fileList = this.value;
                    return;
                }
            }
        }
    },
    mounted() {
        this.fileList = this.value;
    },
    data() {
        return {
            action: "/admin/ajax/upload",
            // action:"api/Upload/upload",
            data: {},
            headers: { batoken: this.$store.state.token },
            fileList: [],
            previewUrl: "",
            previewShow: false,
            timer: null
        };
    },
    methods: {
        onPreview(file) {
            this.previewUrl = file.url;
            this.previewShow = true;
        },
        onRemove(file, fileList) {
            this.fileList = fileList;
            this.$emit(
                "change",
                fileList.map(item => {
                    if (item.response) {
                        return {
                            url:
                                "http://nhcj.app65.cn/" +
                                item.response.data.file.url,
                            name: item.name
                        };
                    } else {
                        return {
                            url: item.url,
                            name: item.name
                        };
                    }
                })
            );
        },
        onSuccess(response, file, fileList) {
            console.log(response, "response");
            if (response.code === 1) {
                this.$message.success(response.msg);
                this.fileList = fileList;
                if (this.timer) clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.$emit(
                        "change",
                        fileList.map(item => {
                            if (item.response) {
                                return {
                                    url:
                                        "http://nhcj.app65.cn/" +
                                        item.response.data.file.url,
                                    name: item.name
                                };
                            } else {
                                return {
                                    url: item.url,
                                    name: item.name
                                };
                            }
                        })
                    );
                }, 500);
            } else {
                this.$message.error(response.msg);
            }
        },//fileList
        beforeUpload(file) {
            const isAllowSize = file.size / 1024 / 1024 < 4;
            const isAllowType =
                file.type === "image/jpeg" || file.type === "image/png";
            if (!isAllowSize) {
                this.$message.error("上传文件大小不能超过4M!");
            }
            if (!isAllowType) {
                this.$message.error("只能上传jpg或png格式");
            }
            return isAllowSize && isAllowType;
        },
        onExceed(files, fileList) {
            this.$message.error("上传图片数量不能超过" + this.limit + "张");
        },
        onError(err, file, fileList) {
            console.log(err, file, fileList);
        }
    }
};
</script>